<template>
  <view class="list">
    <view class="nothing" v-if="list.length === 0">暂无优惠券...</view>
    <template v-else>
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="icon">优惠券</view>
        <view class="amount">￥: {{item.amount}}元</view>
        <view class="btn" @click="click">
          <u-button text="使用" type="primary" size="small"></u-button>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import base64 from '../../util/base64'
import Express from '../../api/express'
const expressModel = new Express()
export default {
  data() {
    return {
      list: [],
      ticket: 0,
      set: {}
    }
  },
  methods: {
    getTicket() {
      expressModel.getTicket().then(response => {
        let { data } = response
        data = base64.parse(data)
        this.ticket = data.ticket
        this.set = data.set
        // 构建优惠券
        let length = Number.parseInt(this.ticket / this.set.amount)
        // 限制长度
        if (length > 100) {
          length = 100
        }
        for (let i = 0; i < length; i++) {
          this.list.push({
            amount: this.set.amount
          })
        }
      })
    },
    click() {
      let params = this.$store.getters['Express/params']
      if (!params) {
        params = {}
      }
      params.ticket = this.set.amount
      this.$store.dispatch('Express/set_params', params).then(() => {
        uni.navigateBack()
      })
    }
  },
  onLoad() {
    this.getTicket()
  }
}
</script>

<style scoped lang="scss">
.list {
  background: #f3f5f7;
  padding: 20rpx;
  .item {
    display: flex;
    align-items: center;
    background: white;
    margin-bottom: 10rpx;
    font-size: 24rpx;
    padding: 20rpx;
    .icon {
      width: 100rpx;
    }
    .btn {
      width: 100rpx;
      padding: 0 20rpx;
    }
    .amount {
      flex: 1;
      color: red;
      font-weight: 700;
    }
  }
  .nothing {
    height: 100vh;
    font-size: 24rpx;
    color: #cccccc;
    line-height: 200px;
    background: white;
    text-align: center;
    border-radius: 10rpx;
  }
}
</style>
